<template>
	<simple-layout
		ref="simpleLayoutRef"
		class="simple-layout-common-box"
		:isUseCheck="false"
		:inputSearch="inputSearch"
		@toSearch="onSearch"
	>
		<template slot="content">
			<top-bottom-layout :hiddenBottom="hiddenBottom">
				<template slot="top">
					<scroll-list
						panel="JoinPost"
						command="postList"
						ref="scrollList"
						:singleAndMult="!hiddenBottom"
						:firstLoadSearch="postFirstLoadSearch"
						@toCheckValueClickProp="onCheckValueClickProp"
					></scroll-list>
				</template>
				<template slot="middle"></template>
				<template slot="bottom">
					<scrollList
						panel="JoinPost"
						command="memberList"
						ref="scrollListMember"
						:firstLoadSearch="firstLoadSearch"
						:showOtherProp="true"
						:otherProps="memberOtherProps"
					></scrollList>
				</template>
			</top-bottom-layout>
		</template>
	</simple-layout>
</template>

<script>
import SimpleLayout from '@/components/simpleLayout.vue';
import topBottomLayout from '@/components/topBottomLayout.vue';
import scrollList from '@/components/scrollList';

export default {
	name: 'JoinPost',
	components: {
		SimpleLayout,
		topBottomLayout,
		scrollList
	},
	inject: ['app'],
	data() {
		return {
			inputSearch: {
				disabled: false,
				placeText: this.$i18n('selectPeople.input',this.$i18n('org.JoinPost.label'))
			},

			postFirstLoadSearch: true,
			firstLoadSearch: false,
			memberOtherProps: ['deptName']

		};
	},
	computed: {
		orgSelect() {
			return this.app().orgSelect;
		},
		canSelectMember() {
			/**
			 * 根据selectType中是否有Member判断是否显示人员
			 */
			let selectType = this.orgSelect.selectType;
			if (selectType.includes('Member')) {
				return true;
			} else {
				return false;
			}
		},
		hiddenBottom() {
			if (this.canSelectMember) {
				return false;
			} else {
				return true;
			}
		}
	},
	methods: {
		onSearchData(data) {
			this.$refs.scrollList.search(data);
		},
		onSearchDataMember(data) {
			this.$refs.scrollListMember.search(data);
		},
		onSearch(val) {
			let accountId = this.orgSelect.defaultAccountId;
			this.$refs.scrollListMember.initProps();
			this.onSearchData({ keyword: val, accountId });
		},
		onCheckValueClickProp(data) {
			if (!this.canSelectMember) {
				return;
			}

			let { isNeedCheckLevelScope } = this.orgSelect;
			this.onSearchDataMember({ postId: data.id, isNeedCheckLevelScope });
		},
		onChangeAccount(data) {
			this.$refs.simpleLayoutRef.onChangeAccount(data);
		}
	}
};
</script>

<style scoped lang="scss">

</style>
